<!-- 免疫配置 -->
<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="form">
            <el-form :inline="true" :model="formInline">
                <el-form-item label="免疫项目">
                    <el-input v-model="formInline.project" placeholder="免疫项目" size="small"></el-input>
                </el-form-item>
                <el-form-item label="免疫对象">
                    <el-select v-model="formInline.object" placeholder="免疫对象">
                        <el-option v-for="item in object" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" size="small" icon="el-icon-plus" @click="showDialog">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" size="small" icon="el-icon-delete"
                        @click="deleteHandle()">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" border>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="project" label="免疫项目" align="center">
            </el-table-column>
            <el-table-column prop="object" label="免疫对象" align="center">
            </el-table-column>
            <el-table-column prop="condition" label="免疫条件" align="center">
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center">
                <template slot-scope="scope">
                    {{ (scope.row.date || '').substr(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column prop="days" label="提前提醒天数" align="center" width="100">
            </el-table-column>
            <el-table-column label="是否启用" align="center" width="100">
                <template slot-scope="scope">
                    {{ scope.row.checked == true ? '已启用' : '未启用' }}
                </template>
            </el-table-column>
            <el-table-column prop="notes" label="备注" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="totalRecord">
        </el-pagination>
        <el-dialog :title="!immunityForm.id ? '新增' : '修改'" :visible.sync="dialogVisible">
            <el-form ref="immunityForm" :model="immunityForm" :rules="immunityRules" label-width="110px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="免疫项目:" prop="project">
                            <el-input v-model="immunityForm.project" placeholder="免疫项目"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="免疫对象:" prop="object">
                            <el-select v-model="immunityForm.object" placeholder="免疫对象" style="width:100%">
                                <el-option v-for="item in epidemicPreventionTargets" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="免疫条件:" prop="condition">
                            <el-select v-model="immunityForm.condition" placeholder="免疫条件" style="width:100%">
                                <el-option v-for="item in epidemicPreventionConditions" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日期:" prop="date">
                            <el-date-picker v-model="immunityForm.date" type="date" placeholder="日期" style="width:100%"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="疫苗:" prop="vaccinum">
                            <el-select v-model="immunityForm.vaccinum" placeholder="疫苗" style="width:100%">
                                <el-option v-for="item in vaccinum" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="提前提醒天数:" prop="days">
                            <el-input v-model="immunityForm.days" placeholder="提前提醒天数"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="是否启用:">
                    <el-checkbox v-model="immunityForm.checked"></el-checkbox>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="immunityForm.notes" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('immunityForm')">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'

export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                // getDataListURL: '/history/deadmortality/page',
                // getDataListIsPage: true,
                // exportURL: '/history/deadmortality/export',
                deleteURL: '/history/deadmortality',
                // deleteIsBatch: true
            },
            tableData: [
                {
                    date: '2023/09/10 00:00:00',
                    checked: true
                }
            ],//表格data数据
            value: '',
            dialogVisible: false,
            epidemicPreventionTargets: [
                {
                    value: '生长猪',
                    label: '生长猪'
                },
                {
                    value: '种猪',
                    label: '种猪'
                },
            ],
            epidemicPreventionConditions: [
                {
                    value: '日龄',
                    label: '日龄'
                }
            ],
            vaccinum: [
                {
                    value: '金霉素',
                    label: '金霉素'
                },
                {
                    value: '支原净',
                    label: '支原净'
                },
                {
                    value: '伊维菌素',
                    label: '伊维菌素'
                },
            ],
            immunityForm: {
                id: '',
                project: '',
                object: '',
                condition: '',
                date: '',
                vaccinum: '',
                days: '',
                checked: false,
                notes: ''
            },
            immunityRules: {
                project: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                object: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                condition: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                date: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                vaccinum: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                days: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ]
            },
            currentPage: 1,//默认显示第一页
            pageSize: 10,//默认每页显示5条数据
            totalRecord: 100,//总数据条数
            formInline: {
                project: '',
                object: '',
            },
            object: [{
                value: '生长猪',
                label: '生长猪'
            }, {
                value: '种猪',
                label: '种猪'
            }],
        }
    },
    mounted() {
        this.getData();//列表的数据
    },
    methods: {
        // 列表的数据
        getData() {
            this.$http.get(`/kk`).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.tableData = res.data
            }).catch(() => { });
        },
        // 新增
        showDialog() {
            //显示对话框
            this.dialogVisible = true;
            //清除数据
            this.immunityForm = {
                id: '',
                project: '',
                object: '',
                condition: '',
                date: '',
                vaccinum: '',
                days: '',
                checked: false,
                notes: ''
            }
        },
        // 编辑
        handleEdit(row) {
            this.dialogVisible = true;
            this.immunityForm = { ...row };
            console.log(';;;;;;;', this.immunityForm);
        },
        // 弹窗-确定接口----------------
        submitForm(formName) {
            //当全部验证字段通过，再开始业务逻辑
            this.$refs[formName].validate((valid) => {
                //如果全部字段符合条件
                if (valid) {
                    if (!this.immunityForm.id) {
                        delete this.immunityForm.id
                    }
                    this.$http[!this.immunityForm.id ? 'post' : 'put'](`/a`, this.immunityForm).then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.getData();
                        } else {
                            return this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        // 每页条数
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val
        },
        onSubmit() {
            console.log('submit!', this.formInline);
        }
    }
}
</script>

<style lang="scss" scoped>
.el-col {
    margin-bottom: 3px;
}
</style>